<template>
  <div class="logo">
    <div class="logp"></div>
    <div class="logi">
      <div class="inp-q">
        <el-form
          label-position="top"
          size="large"
          :model="userinfo"
          :rules="rules"
          ref="myForm"
        >
          <el-form-item label="用户名" label-width="100px" prop="uname">
            <el-input
              placeholder="请填写你的用户名"
              clearable
              v-model="userinfo.uname"
            >
              <template #prefix>
                <i class="iconfont icon-icon-test1"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="100px" prop="pwd">
            <el-input
              type="password"
              placeholder="请填写你的密码"
              v-model="userinfo.pwd"
              show-password
            >
              <template #prefix>
                <i class="iconfont icon-icon-test"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="再次输入密码" label-width="100px" prop="pwd">
            <el-input
              type="password"
              placeholder="请再次填写你的密码"
              v-model="userinfo.code"
              show-password
            >
              <template #prefix>
                <i class="iconfont icon-icon-test"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-button @click="handleLogin" type="primary" class="mt20"
            >登录</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, getCurrentInstance } from 'vue'
// 创建引用数据类型
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import type { FormInstance, FormRules } from 'element-plus'
import { isValidComponentSize } from 'element-plus/es/utils'
import { useRouter } from 'vue-router'
import { showMsg } from '@/utli/toast'
// 导入提示框的封装方法对应表单验证中的方法3
// import router from '@/router'

interface Userinfo {
  // 数据类型的约束
  uname: string
  pwd: string
  code: string
}
const router = useRouter()
// 等同于配置api中的this.$router
const store = useStore()
// 等同于配置api当中的this.$store。(得到一个store对象)
const { appContext } = getCurrentInstance()!
// 获得当前的应用实例
const ctx = appContext.config.globalProperties
// 获取当前应用实例中的全局方法
// 对应表单验证的方法2
const userinfo = reactive<Userinfo>({
  // 显示登录是表单中的内容
  uname: '你是猪呀',
  pwd: '112233',
  code: '112233'
})
const rules = reactive({
  // 表单验证
  uname: [
    { required: true, message: '用户名必须填', trigger: 'blur' },
    {
      min: 3,
      max: 5,
      message: '用户名不能少于5个字符',
      trigger: 'blur'
    }
  ],
  pwd: [
    { required: true, message: '密码必须填', trigger: 'blur' },
    { min: 6, max: 12, message: '密码不能少于6个字符', trigger: 'blur' }
  ]
})
const myForm = ref<FormInstance>()
// 创建一个ref对象 目的是为了让表单form组件 通过ref属性 来跟这个 ref对象绑定
// 以便在后期我使用 这个ref对象来得到对应的表单组件
const handleLogin = async () => {
  // 给按钮绑定的点击事件
  (myForm.value as FormInstance).validate((isValid, invalidFields) => {
    console.log(isValid, invalidFields)
    if (isValid) {
      // 修改vuex中的menu
      if (userinfo.uname === 'admin') {
        store.commit('setMenu', [
          { name: '首页', url: '/index' },
          { name: '学员管理', url: '/admin' },
          { name: '公司管理', url: '/com' },
          { name: '题库管理', url: '/qati' }
        ])
        console.log(userinfo.uname, '11')
      } else {
        store.commit('setMenu', [
          { name: '首页', url: '/index' },
          { name: '学员管理', url: '/admin' }
        ])
        console.log(userinfo.uname, '33')
      }
      // 跳转路径的方法1
      // router.replace('/index')
      // 跳转路径的方法2
      router.replace({
        name: 'index',
        query: {
          user: userinfo.uname
        },
        params: {
          id: 888,
          a: 123
        }
      })
      console.log(userinfo.uname, '22')
      // 路由的跳转到主页，query传递地址栏参数,params自主设置动态参数，通过添加路由的路径参数来设置
    } else {
      // 方法3(提示框)
      showMsg('请填写正确的账号信息')
      // 方法2(提示框)
      // ctx.$message.warning('123')
      // 方法1(提示框)
      // ElMessage({
      //   showClose: true,
      //   message: '请填写正确的账号信息',
      //   type: 'error'
      // })
    }
  })
}
</script>
<script lang="ts">
export default {
  name: 'loGo'
}
</script>
<style scoped lang="scss">
@media screen and (min-width: 900px) {
  .logo {
    width: 100vw;
    height: 100vh;
    display: flex;
    .logp {
      width: 50vw;
      // height: 50vh;
      background: url(https://img.zcool.cn/community/013xnfmppskncwoqep0nyt3537.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100)
        no-repeat;
      background-size: 100% 100%;
    }
    .logi {
      width: 50vw;
      // height: 50vh;
      background: url(https://img.zcool.cn/community/01zskc83ogf1r9tfyxelrr3436.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100)
        no-repeat;
      background-size: 100% 100%;
      padding: 20px;
    }
  }
}
@media screen and (max-width: 900px) {
  .logi {
    width: 100vw;
    height: 100vh;
    background: url(https://img.zcool.cn/community/01zskc83ogf1r9tfyxelrr3436.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100)
      no-repeat;
    background-size: 100% 100%;
    padding: 20px;
  }
}
.logi {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inp-q {
  width: 500px;
  height: 500px;
  padding-top: 200px;
}
.mt20 {
  // margin-top: 20px;
  width: 500px;
}
</style>
